<template>
  <div class="box">
    <div class="search">
      <div class="iconfont searchItem">&#xe68d;</div>
      <input
        type="text"
        class="slides"
        placeholder="搜索你感兴趣的内容"
        v-model="searchText.value"
      />

      <button class="btn" @click="searchBtn()">搜索</button>
    </div>

    <div class="list">
      <div class="channelitem listStyle one" @click="routerTo('31')">爱情</div>
      <div class="channelitem listStyle" @click="routerTo('31')">创意</div>
      <div class="channelitem listStyle" @click="routerTo('31')">动画</div>
      <div class="channelitem listStyle" @click="routerTo('31')">搞笑</div>
      <div class="channelitem listStyle" @click="routerTo('31')">我的</div>
      <!-- <div
        class="channelitem listStyle"
        @click="trance()"
        :class="{ colorW: searchText.colorTrancs }"
      >
        全部频道
      </div> -->
      <div
        class="channelitem listStyle"
        :class="{ colorW: searchText.colorTrancs }"
        @click="routerTo('全部频道')"
      >
        全部频道
      </div>
    </div>

    <div class="channel" v-show="searchText.allChannel">
      <ul class="channelwarp">
        <li class="channelitem" v-for="item in channel" key="item">
          {{ item }}
        </li>
      </ul>
    </div>

    <!-- <div class="image"></div> -->
    <!-- <Cardwarp /> -->
    <router-view></router-view>
  </div>
</template>

<script setup>
import { reactive } from "@vue/reactivity";

import { getCurrentInstance } from "@vue/runtime-core";
import Cardwarp from "../card/index.vue";
import "./style.css";
import { useRouter } from "vue-router";

//搜索框的值
var searchText = reactive({
  value: "",
  allChannel: false, //取消展开
  colorTrancs: true,
});

var channel = [
  "明星",
  "搞笑",
  "情感",
  "新时代",
  "社会",
  "电视剧",
  "美食",
  "财经",
  "读书",
  "摄影",
  "汽车",
  "美女",
  "电影",
  "体育",
  "数码",
  "综艺",
  "时尚",
  "星座",
  "股市",
  "房产",
  "家居",
];

//搜索按钮
function searchBtn() {
  proxy.$searchApp({
    method: "POST",
    url: "/api/9",
    headers: {
      "Content-Type": "application/json",
    },
    data: {
      q: searchText.value,
    },
  });
  console.log(searchText.value);
}
function trance() {
  searchText.allChannel = !searchText.allChannel;

  searchText.colorTrancs = !searchText.colorTrancs;
}

var { proxy } = getCurrentInstance();

var router = useRouter();
//重定向
// (() => {
//   router.push({
//     name: "Index",
//   });
// })();
var routerTo = (val) => {
  console.log(val);
  if (val == "全部频道") {
    router.push({
      name: "Index",
    });
  } else if (val == "我的") {
    router.push({
      name: "Mine",
    });
  } else {
    router.push({
      name: "Detal",
      params: { q: val },
    });
  }
};
</script>
<style scoped>
</style>
